<template>
	<view class="edit-container">
		<!-- 头部导航 -->
		<view>用户信息编辑</view>

		<!-- 表单主体 -->
		<uni-forms ref="form" :modelValue="formData" :rules="rules" @submit="handleSubmit">
			<!-- 基础信息区块 -->
			<view class="form-section">
				<uni-section title="基础信息" type="line"></uni-section>

				<uni-forms-item label="手机号码" required name="userTel">
					<uni-easyinput v-model="formData.userTel" placeholder="请输入11位手机号" :input-border="false" />
				</uni-forms-item>

				<uni-forms-item label="用户昵称" name="nicName">
					<uni-easyinput v-model="formData.nicName" placeholder="请输入2-20位昵称" />
				</uni-forms-item>
				<uni-forms-item label="用户Id" name="userId">
					<uni-easyinput v-model="formData.userId" :disabled="true" />
				</uni-forms-item>
			</view>

			<!-- 地理信息区块 -->
			<view class="form-section">
				<uni-section title="位置管理" type="line"></uni-section>
			<!-- 	<uni-forms-item label="当前坐标">
				 <map-picker :latitude="formData.location.latitude||25.5731436" :longitude="formData.location.longitude||119.7495641" @change="updateLocation" /> 
				</uni-forms-item> -->

				<uni-forms-item label="搜索半径">
					<slider-range v-model="formData.receiveDistance" :min="1" :max="50" unit="km" />
				</uni-forms-item>
			</view>

			<!-- 设备信息区块 -->
			<view class="form-section">
				<uni-section title="设备绑定" type="line"></uni-section>
				<uni-forms-item label="推送标识">
					<uni-tag :text="formData.push_clientid || '未绑定'" type="info" circle />
				</uni-forms-item>

				<uni-forms-item label="连线状态">
					<status-indicator :online="isOnline" :lastActive="Date(formData.connectionTime)" />
				</uni-forms-item>
			</view>
			<view class="btnarea">
				<button @click="handleSubmit">保存</button>
				<button @click="handleCancel">取消</button>
			</view>
		</uni-forms>
		<view class="btn"></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			originalData: {},
			formData: {
				userId: '',
				userTel: '',
				nicName: '',
				location: {latitude:25.5731436, longitude:119.7495641},
				receiveDistance: 10,
				push_clientid: '',
				connectionTime: null,
				disConnectionTime: null
			},
			rules: {
				userTel: {
					rules: [
						{
							required: true,
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '手机号格式错误'
						}
					]
				},
				nicName: {
					rules: [
						{
							minLength: 2,
							maxLength: 20,
							errorMessage: '昵称长度2-20字符'
						}
					]
				}
			}
		};
	},
	watch: {
		'formData.connectionTime': {
			handler(newVal) {
				if (newVal) {
					this.startConnectionTimer();
				}
			},
			immediate: true
		}
	},
	computed: {
		isOnline() {
			return this.formData.disConnectionTime < Date.now();
		}
	},
	onLoad(e) {
		try {
			this.formData = JSON.parse(decodeURIComponent(e.data));
			console.log('this.formData: ' + JSON.stringify(this.formData));
		} catch (error) {
			console.error('数据解析出错:', error);
			// 可以在这里设置默认值或者给出提示
		}
	},
	methods: {
		// 地图坐标更新
		async updateLocation(e) {
			this.formData.location = {
				type: 'Point',
				coordinates: [e.longitude, e.latitude]
			};
			// 自动反查地址信息
			const address = await this.$reverseGeocode(e.longitude, e.latitude);
			this.$set(this.formData, 'address', address);
		},
		async beforeSubmit() {
			// 操作审计日志
			this.$log({
				action: 'user_update',
				operator: this.$store.state.user.id,
				target: this.formData.userId
			});

			// 敏感操作二次验证
			if (this.originalData.userTel !== this.formData.userTel) {
				await this.$smsVerify(this.formData.userTel);
			}
		},
		async handleSubmit() {
			try {
				await this.beforeSubmit();
				// 这里可以添加保存数据到后端的逻辑
				console.log('保存成功');
			} catch (error) {
				console.error('保存失败:', error);
			}
		},
		handleCancel() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
/* 编辑容器整体样式 */
.edit-container {
	background: #f5f7fa;
	padding: 20rpx;
}

/* 头部导航样式 */
.edit-container > view:first-child {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20rpx;
	color: #333;
}

/* 表单整体样式 */
uni-forms {
	width: 100%;
}

/* 表单区块样式 */
.form-section {
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	padding: 20rpx;
}

/* 表单区块标题样式 */
.uni-section {
	margin-bottom: 10rpx;
}

/* 表单字段标签样式 */
.uni-forms-item__label {
	font-weight: 500;
	color: #333;
	margin-bottom: 8rpx;
}

/* 输入框样式 */
.uni-easyinput {
	border: 1rpx solid #e4e7ed;
	border-radius: 8rpx;
	padding: 12rpx;
	font-size: 28rpx;
	color: #666;
}

/* 地图选择器样式 */
.map-picker {
	height: 300rpx;
	border-radius: 8rpx;
	overflow: hidden;
	margin-top: 10rpx;
}

/* 滑动条范围选择器样式 */
.slider-range {
	margin-top: 10rpx;
}

/* 标签样式 */
.uni-tag {
	margin-top: 10rpx;
	padding: 8rpx 16rpx;
	font-size: 28rpx;
}

/* 状态指示器样式 */
.status-indicator {
	margin-top: 10rpx;
}

/* 按钮区域样式 */
.btnarea {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
}

/* 按钮样式 */
.btnarea button {
	padding: 12rpx 24rpx;
	border: none;
	border-radius: 8rpx;
	font-size: 30rpx;
	font-weight: 500;
	cursor: pointer;
}

/* 保存按钮样式 */
.btnarea button:first-child {
	background-color: #1989fa;
	color: #fff;
}

/* 取消按钮样式 */
.btnarea button:last-child {
	background-color: #ccc;
	color: #333;
}
</style>
